<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style type="text/css">
html,body{margin:0;padding:0;overflow: hidden;max-height: 100vh;}
.baidu-map-container{height:100vh;width:100vw;opacity: 0;}
.ui-search-ctn{
    position:absolute;left:.5rem;top:.5rem;min-height:2rem; line-height:2rem;border-radius:.3rem;background: #FFFFFF;box-shadow: 0 2px 6px 0 #1b8eec80;overflow: hidden;
    z-index: 3010;
}
.ui-search-ctn i{width:2rem;text-align: center;cursor:pointer;color:#1b8eec;z-index: 999;}
.ui-search-ctn input{width:100%;transition: width .2s linear; line-height: 2rem;border:none;outline: none;font-size:0.75rem;width: 0rem;padding:0;}
.ui-search-ctn .ipt-show{width:15rem;padding:0 .2rem;}
.tangram-suggestion-main{
  z-index: 3011;
}
.box-row{
  display: flex;flex-direction: row;
}
.is-show{opacity: 1;}
.anchorBL{display: none;}

@font-face {
    font-family: 'iconfont';  /* project id 2385213 */
    src: url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.eot');
    src: url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.woff') format('woff'),
    url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2385213_2cj88ggdhdm.svg#iconfont') format('svg');
  }

i[class^=ui-ico]{
    font-family: iconfont;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.ui-ico-menu::before{content:"\e605"}
</style>
<body>
<div class="baidu-map-container is-hide" id="baidu-map-container"></div>
<div class="ui-search-ctn box-row">
  <i class="ui-ico-menu" onclick="toggleSearchIpt()"></i>
  <input id="search-input" type="text">
</div>
</body>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=uefPyCK603nMfyHIk20x9MKc&callback=initBaiduMap"></script>
<script>
    var ipt = document.getElementById('search-input')
    var container = document.getElementById('baidu-map-container');
    var map, ac;
    const toggleSearchIpt = ()=>{
      ipt.classList.toggle('ipt-show');
    }
    function initBaiduMap(){
      
    }
    
    function createMap(data, fn)
    {
      var point = new BMapGL.Point(data.lng, data.lat); //岳阳地区默认坐标

      map = new BMapGL.Map(container, {
          minZoom:10,maxZoom:22
      });
      var geoc = new BMapGL.Geocoder(); //用户地址转换

      map.enableScrollWheelZoom();
      setTimeout(()=>{
          map.centerAndZoom(point,17);
          container.classList.add('is-show');
      }, 100)
      
      const setMarker = (point)=>{
          var marker = new BMapGL.Marker(point);    // 创建标注
          map.addOverlay(marker);
          if(data.drag){
            marker.enableDragging();
            marker.addEventListener("dragend", (e) => {
                var p = e.latLng;
                fn({lat:p.lat,lng:p.lng});
            });
          }
      }
      setMarker(point);
      
      if(data.search){
        ac = new BMapGL.Autocomplete({    //建立一个自动完成的对象
            "input" : ipt,
            "location" : map
        });

        const setPlace = (v)=>{
            map.clearOverlays();

            function searchResult(){
                var p = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(p, 18);
                setMarker(p);
                fn({lat:p.lat,lng:p.lng});
            }
            var local = new BMapGL.LocalSearch(map, {onSearchComplete: searchResult});
            local.search(v);
        }

        ac.addEventListener('onhightlight', e =>{var _value = e.fromitem.value})
        ac.addEventListener('onconfirm', (e)=>{
            var v = e.item.value;
            var addr  = v.province +  v.city +  v.district +  v.street +  v.business;
            ipt.value= addr;
            console.log('ddr:', addr)
            setPlace(addr);
        })
      }
    }
    window.onunload = function(){
      map?.clearOverlays();
      ac?.dispose();
      map?.destroy && map.destroy();
    }
</script>
</html>
